<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="../lib/swiper/css/swiper.css">
	<link rel="stylesheet" type="text/css" href="../css/index.css"/>
</head>
<body>
	<script src="../lib/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/setcookie.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//判断一下cookie里面是否有登录的数据
		let userA=getCookie('username');
		//判断如果为空的cookie数据，那么就跳转到登录页面
		if(userA===''){
			window.location.href = './login.html';
		}
	</script>
	<header class="clean" >
		<h1 class="mui-title"></h1>
		<div class="topbar-left ">
			<ul class="clean">
				<li>在线商城</li>
				<li>坚果Pro3</li>
				<li>坚果Pro2S</li>
				<li>坚果TNT工作站</li>
				<li>Smartisan OS</li>
				<li>欢喜云</li>
				<li>应用</li>
				<li>论坛</li>
				<li>荣誉与奖项</li>
				<li>加入我们</li>
				<li>下载APP</li>
			</ul>
		</div>
		<div class="topbar-right ">
			<ul class="clean">
				<li>登录</li>
				<li id="car">购物车</li>
			</ul>
		</div>
	</header>
	<div class="main-title container">
		<ul class="list clean">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>服务</li>
		</ul>
		<div class="select">
			<input type="text" name="" id="" value="" placeholder="搜索"/>
		</div>
	</div>
	<div class="datesWide container">
		<div class="dates container ">
			<ul class="dates-list clean">
			</ul>	
		</div>
	</div>
	
	
	<script src="../js/index.js" type="text/javascript" charset="utf-8"></script>
<!-- 轮播图 -->
	<script src="../lib/swiper/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
	<div class="swiper-container container">
	    <div class="swiper-wrapper">
	        <div class="swiper-slide"><img src="https://resource.smartisan.com/resource/c2912045426c6125c3559b46e4babdc7.png?x-oss-process=image/resize,w_976/quality,Q_100" ></div>
	        <div class="swiper-slide"><img src="https://resource.smartisan.com/resource/af18ae7dfa15f0a73a24a1765e0f8262.png?x-oss-process=image/resize,w_976/quality,Q_100" ></div>
	        <div class="swiper-slide"><img src="https://resource.smartisan.com/resource/47c62043cd795ca067db4d3d569a9a29.jpg?x-oss-process=image/resize,w_976/quality,Q_100" ></div>
			<div class="swiper-slide"><img src="https://resource.smartisan.com/resource/ee2507e25b40c1544706a1a30c537098.jpg?x-oss-process=image/resize,w_976/quality,Q_100" ></div>
			<div class="swiper-slide"><img src="https://resource.smartisan.com/resource/ac2d1e077131e1dd2df14454bee32088.jpg?x-oss-process=image/resize,w_976/quality,Q_100" ></div>
	    </div>
	    <!-- 如果需要分页器 -->
	    <div class="swiper-pagination"></div>
	</div>
	<script type="text/javascript">     
	  var mySwiper = new Swiper ('.swiper-container', {
		loop: true, // 循环模式选项
		autoplay: {
		  delay: 2000
		},
		// 如果需要分页器
		pagination: {
		  el: '.swiper-pagination',
		}
	  })        
	</script>
	
<!-- 轮播图下面的商品 -->
	<div class="shops container">
		<ol class="clean">
			<li>
			<img src="https://resource.smartisan.com/resource/eca4f286fde41cebb778dc4f8bf055df.jpg?x-oss-process=image/resize,w_480/format,webp" >
			</li>
			<li><img src="https://resource.smartisan.com/resource/fe2f969d1f297e1a1eec6eb8e9f77277.jpg?x-oss-process=image/resize,w_480/format,webp" ></li>
			<li><img src="https://resource.smartisan.com/resource/33ea4bfa05068e0741b7278fec9da8a6.jpg?x-oss-process=image/resize,w_480/format,webp" ></li>
			<li><img src="https://resource.smartisan.com/resource/fdc4370d1ce14a67fadc35d74209ac0f.jpg?x-oss-process=image/resize,w_480/format,webp" ></li>
		</ol>
	</div>
<!-- 热门商品 -->
<div class="hotShops container">
	<h2>热门商品</h2>
	<div class="shopsList">
		<ul class="clean">
			
		</ul>
	</div>
</div>

<!-- 热门商品的渲染 -->
<script type="text/javascript">
	getHotshops();
	function getHotshops(){
		$.ajax({
			url:"../lib/json/hotshops.json",
			dataType:'json',
			success:function(res){
				console.log(res)
				//渲染准备
				let str = '';
				res.forEach(item => {
				  str += `
					<li>
					  <div>
					    <img src="${ item.list_url }" alt="">
					  </div>
					  <p class="title">${ item.list_name }</p>
					  <h4 class="price">￥${ item.list_price }</h4>
					</li>
				  `;
				  //加入到父元素中
				   $('.shopsList > ul').html(str)
				})
				
			}
		})
	}
</script>

<script type="text/javascript">
	$.ajax({
		url: '../lib/json/navtop.json',
		dataType: 'json',
		success: function (res){
			console.log(res);
			// 1.一级菜单栏
			let str = '';
			res.forEach(item =>{
				//渲染一级菜单栏的li
				str+=`<li>${item.name}</li>`;
				$('.main-title .list')
				.html(str)
				.on({
					mouseenter: () => $('.dates-list').stop().slideDown(),
					mouseleave: () => $('.dates-list').stop().slideUp()
				})
				.children('li')
				.on('mouseover',function(){
					//知道自己是第几个li
					const index=$(this).index();
					//找到这个li对应的数组
					const list = res[index].list;
					//拼接
					let str = '';
					list.forEach(item=>{
						str+=`
						<li>
							<ol id="ols">
								<li><img src="${item.list_url}"></li>
								<li>${item.list_name}</li>
								<li>￥${item.list_price}</li>
							</ol>
						</li>
						`;
					$('.dates-list').html(str)	
					})
				})
				//  给dates-list添加一个移入移出事件
				$('.dates-list')
				  .on({
				    mouseover: function () { $(this).finish().show() },
				    mouseout: function () { $(this).finish().slideUp() }
				  })
				
			})
		  }
	})
</script>
</body>
</html>
